<template>
  <div class="sidebar">
    <ul>
      <el-menu
          active-text-color="#00c9bb"
          class="el-menu-vertical-demo"
          background-color="#f4f4f4"
          :default-active="active"
          text-color="#00c9bb"
          @open="handleOpen"
          @close="handleClose"
          router
      >
        <el-menu-item v-for="(item) in routes.filter(route=>route.path!=='/')" :index="item.path" :route="item.path">
          <span class="iconfont icon-color" :class="item.meta.icon"></span>
          <span>{{item.meta.title}}</span>
        </el-menu-item>
      </el-menu>
    </ul>
  </div>
</template>

<script setup>
import {routes} from "@/router";
import {onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
const active = ref('')
const router = useRouter()
const route = useRoute()

onMounted(()=>{
  active.value = route.matched[0].path
})
//todo: 此处还有一个bug，根据当前的链接选中对应的index
const handleOpen = (key) => {
  active.value = key
}

const handleClose = (key) => {
  console.log("handleClose.key", key)
}
</script>

<style scoped lang="less">
.sidebar {
  //width: 250px;
  padding: 20px;
  ul {
    .el-menu {
      border: 0;
    }
    .el-menu-item {
      display: flex;
      font-size: 16px;
      margin: 10px 0;
      padding: 20px 60px;
      &.is-active {
        font-weight: bold;
        background-color: white;
        border-radius: 10px;
      }
      span:last-child {
        margin-left: 10px;
      }
    }
    .el-menu-item:hover{
      background-color: transparent;
      &.is-active {
        background-color: white;
      }
    }
  }
}

</style>